<!DOCTYPE html>
<html lang="en">
<head>
    <title>${tdk.navTitle}_江苏佳盛源</title>
    <meta name=”keywords” content=”${tdk.navKeywords}”/>
    <meta name="description" content="${tdk.navDesc}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content=""/>
    <!-- bootstrap-css -->
    <link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!--// bootstrap-css -->
    <link rel="icon" type="image/x-icon" href="${ctxPath}/static/faviconTitle.ico"/>
    <!-- css -->
    <link rel="stylesheet" href="${ctxPath}/static/css/stylea.css" type="text/css" media="all"/>
    <link href="${ctxPath}/static/css/zhyd.comment.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/zhyd.core.css" rel="stylesheet">
    <!--// css -->

    <!-- font-awesome icons -->
    <link href="${ctxPath}/static/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
    <script src="${ctxPath}/static/js/bootstrap.js"></script>

    <script src="${ctxPath}/static/js/bootstrap-paginator.js"></script>

    <!-- flexslider -->
    <link rel="stylesheet" href="${ctxPath}/static/css/flexslider.css" type="text/css" media="screen"/>
    <!-- //flexslider -->
</head>
<body>
<!--banner-->
@include("../_header.html",{current:'新闻资讯'}){}
<div class="banner-top visible-lg-block visible-md-block"
     style=" background: url(${newsClassDesc.bannerPic}) no-repeat 0px 0px;background-size: 100% 100%;height: 370px">
</div>

<div class="banner-top visible-xs-block visible-sm-block"
     style="height: 150px;background: url(${newsClassDesc.mobileBannerPic}) no-repeat 0 ;background-size: 100% 100% ">
</div>
<!--//banner-->
<div class="col-md-12 visible-md-block visible-lg-block">
    <div class="container-fluid">
        <div class="container" style="margin-top: 10px;position: relative">
            <div class="blog-main news-list-body" style="margin-top: 30px" id="media">
                @for(loadNewsVO in newsList){
                <a class="news-list-item" href="/newsDetail/newsId${loadNewsVO.id}.html" target="_blank">
                    <div class="news-cont-box">
                        <h4 class="title">${loadNewsVO.newsTitle}</h4>
                        <p class="time">${loadNewsVO.updateDatetime,dateFormat="yyyy年MM月dd日"}</p>
                        <p class="intro">
                            ${loadNewsVO.description}
                        </p>
                    </div>
                    <div class="news-item-img" style="background-image: url(${loadNewsVO.pic})"></div>
                </a>
                @}
            </div>
            <div class="loading-box loadingCont">
                <img src="${ctxPath}/static/images/icon/loading.gif">
                <span>加载中...</span>
            </div>
            <div class="no-cont-box noCont">暂无更多新闻</div>
            <div class="col-md-12 visible-lg-block visible-md-block loadBtn" style="padding:20px 0;margin-bottom:20px;border-bottom:1px solid #d4d4d4;text-align: left;cursor:pointer;" onclick="more()">
                <span style="display:inline-block;vertical-align:middle;font-size: 24px; font-weight: bold;">更多</span>
                <img src="${ctxPath}/static/images/icon/箭头2.png" width="20">
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="visible-xs-block visible-sm-block col-xs-12">
        <!--移动端标题及介绍-->
        <div class="blog-main news-list-body mobile-news-list mobile-product-box" style="margin-top: 10px" id="media_mobile">
            @for(loadNewsVO in newsList){
            <a class="news-list-item" href="/newsDetail/newsId${loadNewsVO.id}.html">
                <div class="news-cont-box">
                    <p class="title">${loadNewsVO.newsTitle}</p>
                    <p class="time">${loadNewsVO.updateDatetime,dateFormat="yyyy年MM月dd日"}</p>
                    <p class="intro">
                        ${loadNewsVO.description}
                    </p>
                </div>
                <div class="news-item-img" style="background-image: url(${loadNewsVO.pic})"></div>
            </a>
            @}
        </div>
        <div class="loading-box loadingCont">
            <img src="${ctxPath}/static/images/icon/loading.gif">
            <span>加载中...</span>
        </div>
        <div class="no-cont-box noCont">暂无更多新闻</div>
        <div class="visible-xs-block visible-sm-block col-xs-12 loadBtn" style="padding:20px 0;text-align: left;cursor:pointer;" onclick="moreMobile()">
            <span style="display:inline-block;vertical-align:middle;font-size: 16px; font-weight: bold;">更多</span>
            <img src="${ctxPath}/static/images/icon/箭头.png" width="14">
        </div>
    </div>

    <script>
        let page = 1;
        function more() {
            $(".loadingCont").show();
            var param = {'page': ++page, 'rows': 5};
            $.ajax({
                url: '/newsLists',
                type: "post",
                data: JSON.stringify(param),
                contentType: "application/json;charset=UTF-8",
                dataType: 'JSON',
                success: function (callback) {
                    // $('#media').empty();
                    var list = callback.responselists;
                    if(list.length == 0){
                        $(".noCont").show();
                        $(".loadBtn").remove();
                    }
                    for (var i = 0; i < list.length; i++) {
                        var url = "/newsDetail/newsId" + list[i].id+".html";
                        $('#media').append('<a class="news-list-item" href="/newsDetail/newsId'+list[i].id+'.html" target="_blank">'
                            + '<div class="news-cont-box">'
                            + '<h3 class="title">'+list[i].newsTitle+'</h3>'
                            + '<p class="time">'
                            + list[i].updateDatetime.split(" ")[0]
                            + '</p>'
                            + '<p class="intro">'
                            + list[i].description
                            + '</p>'
                            + '</div>'
                            + '<div class="news-item-img" style="background-image: url(\''+list[i].pic+'\')">\n'
                            + '</div></a>');
                        if (list[i].top == 1) {
                            $("#" + i).after('<span style="display: block;position: absolute;right: 25px;bottom: 145px">' +
                                '<img src="${ctxPath}/static/images/icon/top.png">' +
                                '</span>');
                        }

                    }
                    $(".loadingCont").hide();
                }
            })
        }

        let Mobilepage = 1;
        function moreMobile() {
            $(".loadingCont").show();
            var param = {'page': ++Mobilepage, 'rows': 5};
            $.ajax({
                url: '/newsLists',
                type: "post",
                data: JSON.stringify(param),
                contentType: "application/json;charset=UTF-8",
                dataType: 'JSON',
                success: function (callback) {
                    // $('#media').empty();
                    var list = callback.responselists;
                    if(list.length == 0){
                        $(".noCont").show();
                        $(".loadBtn").remove();
                    }
                    for (var i = 0; i < list.length; i++) {
                        var url = "/newsDetail/newsId" + list[i].id+".html";
                        $('#media_mobile').append('<a class="news-list-item" href="/newsDetail/newsId'+list[i].id+'.html">'
                            + '<div class="news-cont-box">'
                            + '<h3 class="title">'+list[i].newsTitle+'</h3>'
                            + '<p class="time">'
                            + list[i].updateDatetime.split(" ")[0]
                            + '</p>'
                            + '<p class="intro">'
                            + list[i].description
                            + '</p>'
                            + '</div>'
                            + '<div class="news-item-img" style="background-image: url(\''+list[i].pic+'\')">\n'
                            + '</div></a>');
                        if (list[i].top == 1) {
                            $("#" + i).after('<span style="display: block;position: absolute;right: 25px;bottom: 145px">' +
                                '<img src="${ctxPath}/static/images/icon/top.png">' +
                                '</span>');
                        }

                    }
                    $(".loadingCont").hide();
                }
            })
        }
    </script>
</div>

@include("../_footer.html"){}


<script type="text/javascript" src="${ctxPath}/static/js/move-top.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/easing.js"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript" src="${ctxPath}/static/js/scroller-menu.js"></script>
<!-- //here ends scrolling icon -->
<!-- FlexSlider -->
<script defer src="${ctxPath}/static/js/jquery.flexslider.js"></script>
<!-- //FlexSlider -->
</body>
</html>
